<template>
  <div class="wl-and-eb">
    <div class="wl-and-eb__nav">
      <div class="wl-and-eb__tab"
           :class="{'is-active': currentIndex === 0}"
           @click="currentIndex = 0"
      >
        公司盈亏数据
      </div>
      <div class="wl-and-eb__tab"
           :class="{'is-active': currentIndex === 1}"
           @click="currentIndex = 1"
      >
        有效投注额数据
      </div>
    </div>
    <chart-line
      class="wl-and-eb__line"
      :list="lineList"
      :legendVisible="true"
      :format="currentTabInfo.format"
    ></chart-line>
  </div>
</template>

<script>
  import {
    gameByTimeApi,
  } from '@/services/api/home';

  import ChartLine from '../components/chart-line';

  import {getCommand} from '@/build';

  export default {
    name: "win-lose-and-effect-betting",

    components: {
      ChartLine
    },

    props: ['type'],

    mixins: [getCommand],

    data() {
      return {
        currentIndex: 0,
        fetchData: [],
        lineList: [],
        nav: [
          {
            prop: 'rechargeSumMoney',
            filter: 'currency',
            format: (info) => {
              return _.chain(info)
                .map((info) => {
                  return {
                    ...info,
                    win: _.floor(info.win,2)
                  };
                })
                .keyBy('game').mapValues('win').value();
            }
          },
          {
            prop: 'rechargeUniqueUser',
            filter: 'currency',
            format: (info) => {
              return _.chain(info).map((info) => {
                return {
                  ...info,
                  amount: _.floor(info.amount,2)
                };
              }).keyBy('game').mapValues('amount').value();
            }
          },
        ]
      };
    },

    computed: {
      currentTabInfo() {
        return this.nav[this.currentIndex];
      }
    },

    mounted() {
      this.bindGet(gameByTimeApi, 'lineList', {
        sendingData: {
          date: _.toTimestamp(this.type === 2 ?
            {start: [0, 'month'], end: [0, 'day'], startEnd: true} :
            {start: [0, 'day'], end: [0, 'day'], startEnd: true}
          )
        },
      });

      this.getAll();
    },
  };
</script>

<style lang="scss" scoped>
  @include b(wl-and-eb) {
    flex: 0 0 100%;
    @include e(nav) {
      position: relative;
      z-index: 1;
      font-size: $--font-size-x-large;
      font-weight:bold;
      display: flex;
      width: 360px;
      @include e(tab) {
        color: $--color-info;
        padding-right: 20px;
        margin-right: 20px;
        cursor: pointer;
        border-right: 3px solid $--border-color-base;
        @include utils-transition-normal();

        &:last-of-type {
          border-right: 0;
        }
        @include when(active) {
          color: $--color-primary;
        }
      }
    }
    @include e(line) {
      margin-top: 10px;
    }
  }

</style>